<template>
<div class="dialog">
    <div class="dialog-content">
        <div class="dialog-content-header">
            <img class="dialog-content-header-close" src="./img/icon_close.png" @click="close(1)" />
        </div>
        <div class="dialog-content-center">
            <slot></slot>
            <div class="dialog-content-center-title" v-if="dialogConfig.title">{{dialogConfig.title}}</div>
            <div :class="['dialog-content-center-details',{'center':dialogConfig.style}]" v-if="dialogConfig.details" v-html="dialogConfig.details"></div>
            <div class="dialog-content-center-info" v-if="dialogConfig.info">{{dialogConfig.info}}</div>
        </div>
        <div class="dialog-content-bottom">
            <span class="dialog-content-bottom-cancel" v-if="dialogConfig.cancel" @click="close(2)">{{dialogConfig.cancel}}</span>
            <span class="dialog-content-bottom-confirm" v-if="dialogConfig.confirm" @click="confirm">{{dialogConfig.confirm}}</span>
        </div>
    </div>
</div>
</template>

<script>
export default {
    props: ["config"],
    computed: {
        dialogConfig() {
            if (this.config) {
                return this.config
            } else {
                let config = {
                    title: "标题",
                    details: `内容<span class="red">特殊文字</span>`,
                    info: "其他提示",
                    cancel: "取消文案",
                    confirm: "确定文案",
                }
                return config
            }
        }
    },
    methods: {
        close(type) {
            this.$emit("close",type);
        },
        confirm() {
            this.$emit("confirm");
        },
    },
};
</script>

<style lang="less" scoped>
.dialog {
    position: fixed;
    width: 100vw;
    left: 0;
    top: 0;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 999;

    &-content {
        overflow: hidden;
        z-index: 11;
        background: #ffffff;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        width: 90%;

        &-header {
            width: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 2rem;

            &-close {
                width: 16px;
                height: 16px;
                object-fit: contain;
                position: absolute;
                top: 0.875rem;
                right: 0.875rem;
            }
        }

        &-center {
            width: 100%;
            padding: 0 1.5rem;
            box-sizing: border-box;

            &-title {
                width: 100%;
                font-size: 1.0625rem;
                font-weight: 500;
                color: #333333;
                text-align: center;
                margin-bottom: 1rem;
            }

            &-details {
                width: 100%;
                font-size: 0.875rem;
                color: #333333;
                line-height: 1.03125rem;

                /deep/.red {
                    color: #fb6242;
                    margin-top: .3125rem;

                }

                &.center {
                    text-align: center;
                }

                /deep/p {
                  margin-bottom: .3125rem;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }

            &-info {
                color: #999999;
                margin-top: 0.9375rem;
                font-size: 0.875rem;
            }
        }

        &-bottom {
            margin: 1.5rem 0;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
                width: 8.375rem;
                height: 2.6875rem;
                line-height: 2.6875rem;
                text-align: center;
                border-radius: 2.75rem;
                display: inline-block;
            }

            &-cancel {
                background: #F6F9FF;
                color: #3788FE;
                margin-right: .5625rem;
            }

            &-confirm {
                background: #3788FE;
                color: #ffffff;
            }
        }
    }
}
</style>
